<template>
  <Row class="main-container company-user-container" style="padding:20px;">
    <div class="time_container">
      <div class="title">24 小时时段划分图</div>
      <div class="bar">
        <Row class="bar_row">
          <Col :span="1" v-for="(item,index) in timeArr" :key="index" class="square" :class="computed_square(typeArr[index])">
          <span class="span" @contextmenu.stop.prevent="addThing($event,item)" @click.stop.prevent="whichBeClick($event,item)">{{item}}</span>
          </Col>
          <collapseTransition v-if="menu_show">
            <div class="context_munu" ref="refOfMenu">
              <ul class="ul">
                <li @click.stop.prevent="clickMe(1)">峰时段</li>
                <li @click.stop.prevent="clickMe(2)">平时段</li>
                <li @click.stop.prevent="clickMe(3)">谷时段</li>
                <li @click.stop.prevent="clickMe(4)">尖时段</li>
              </ul>
            </div>
          </collapseTransition>
        </Row>
        <div class="three_square">
          <div class="box">
            峰时段
          </div>
          <div class="box">
            平时段
          </div>
          <div class="box">
            谷时段
          </div>
          <div class="box">
            尖时段
          </div>
        </div>
      </div>
    </div>
  </Row>
</template>
<script>
  import collapseTransition from './collapse';
  import {
    getInterval,
    setInterval_
  } from '@/api';
  export default {
    components: {
      collapseTransition
    },
    props: ['row'],
    mounted() {
      document.onclick = () => {
        this.menu_show = false;
      };
      const time_container = document.querySelector('.time_container');
      time_container.onselectstart = () => false;
      this.mountedHttp();
    },
    data() {
      return {
        timeArr: [],
        typeArr: [],
        menu_show: false,
        currentSquare: null,
      }
    },
    methods: {
      mountedHttp() {
        let params = {
          companyId: this.row.id
        }
        getInterval(params).then(res => {
          if (res.code == 200) {
            this.timeArr = res.data.hours;
            this.typeArr = res.data.type;
          } else {
            console.log(res)
          }
        })
      },
      whichBeClick(e, i) {
        let color = '';
        switch (this.typeArr[i]) {
          case 1:
            color = '峰时段';
            break;
          case 2:
            color = '平时段';
            break;
          case 3:
            color = '谷时段';
            break;
          case 4:
            color = '尖时段';
        };
        this.$Message.success(`${this.timeArr[i]}   时是${color}`);

      },
      addThing(event, i) {
        this.menu_show = true;
        let x = event.pageX - event.offsetX;
        let y = event.layerY - event.offsetY;
        this.currentSquare = i;
        this.$nextTick(() => {
          this.$refs.refOfMenu.style.left = `${x - 40}px`;
          this.$refs.refOfMenu.style.top = `30px`;
        })
      },
      clickMe(i) {
        const _this = this;
        let hours = this.currentSquare;
        if (!hours && hours != 0) {
          return false;
        }
        const params = {
          hours,
          type: parseInt(i),
          companyId: _this.row.id
        };
        let color = '';
        switch (i) {
          case 1:
            color = '峰时段';
            break;
          case 2:
            color = '平时段';
            break;
          case 3:
            color = '谷时段';
            break;
          case 4:
            color = '尖时段';
        };

        setInterval_(params).then(res => {
          if (res.code == 200) {
            this.$Notice.success({
              title: '操作成功',
              render: h => {
                return h('span', [
                  `将${hours}时设置为${color}`
                ])
              }
            });
            this.menu_show = false;
            this.currentSquare = null;
            this.mountedHttp();
          } else {
            this.$Message.error(`${res.message}`);
          }
        });
      },

      computed_square(index) {
        switch (index) {
          case 1:
            return 'square_red';
            break;
          case 2:
            return 'square_blue';
            break;
          case 3:
            return 'square_green';
            break;
          case 4:
            return 'square_yellow';
            break;
          default:
            return '';
            break;
        }
      }
    }
  }

</script>
<style lang="scss">
  .time_container {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;

    .title {
      width: 100%;
      text-align: center;
      font-size: 24px;
      font-weight: 700;
      height: 40px;
      line-height: 40px;
    }

    .bar {
      margin-top: 20px;
      font-size: 14px;

      .bar_row {
        position: relative;
      }

      .square {
        width: 4.1%;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: 1px solid #fff;
        background-color: #ccc;
        transition: background-color 0.5s linear;
        cursor: pointer;

        &:hover {
          color: #fff;
        }

        .span {
          width: 100%;
          height: 100%;
          display: block;
        }

        &.square_red {
          background-color: #FF0000;
        }

        &.square_blue {
          background-color: #3399FF;
        }

        &.square_green {
          background-color: #00CC99;
        }

        &.square_yellow {
          background-color: #FFFF00;
        }
      }

      .context_munu {
        position: absolute;

        .ul {
          z-index: 9999;
          min-width: 80px;
          width: 80px;
          box-sizing: border-box;
          margin: 0;
          text-align: left;
          padding: 0px 0;
          font-size: 14px;
          border: 1px solid rgba(0, 0, 0, .15);
          border-radius: 4px;
          background-color: #fff;
          -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          -moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          -ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          -o-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

          li {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #FF0000;
            cursor: pointer;
            transition: all 0.4s ease-in-out;
            -webkit-transition: all 0.4s ease-in-out;
            -moz-transition: all 0.4s ease-in-out;
            -o-transition: all 0.4s ease-in-out;

            &:nth-child(2) {
              background-color: #3399FF;
            }

            &:nth-child(3) {
              background-color: #00CC99;
            }

            &:nth-child(4) {
              background-color: #FFFF00;
            }

            &:hover {
              transform: translate(0, -10px);
              -webkit-transform: translate(0, -10px);
              -moz-transform: translate(0, -10px);
              -o-transform: translate(0, -10px);
              -ms-transform: translate(0, -10px);
            }
          }
        }
      }
    }

    .three_square {
      width: 100%;
      margin: 0 auto;
      margin-top: 40px;
      text-align: center;
      font-size: 12px;

      .box {
        width: 15%;
        height: 30px;
        border-radius: 8px;
        line-height: 30px;
        background-color: #FF0000;
        border: 1px solid #fff;
        display: inline-block;

        &:nth-child(2) {
          background-color: #3399FF;
        }

        &:nth-child(3) {
          background-color: #00CC99;
        }

        &:nth-child(4) {
          background-color: #FFFF00;
        }
      }
    }
  }

</style>
